<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bg{
            color: red;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app" v-bind:id="bg1">
    <div class="bg">
        永和九年岁在癸丑
        {{msg}}
    </div>
    <div>
        {{ count }}
        {{(count+1)*10}}
    </div>
    <div v-html="template"></div>
    <a v-bind:href="url">百度</a>
    <a :href="url1">慕课</a>
    <button type="button" v-on:click="submit()">加数字</button>
    <button type="button" @click="submit1()">减数字</button>

</div>


</body>
<script>
    new Vue({
        // el:'.bg',
        el:'#app',
        data:{
            bg1:'app-bind',
            msg:'你好啊，vue。我是李清照',
            count:0,
            url:'http://www.baidu.com',
            url1:'http://www.imooc.com',
            template:'<div>hello template</div>'
        },
        methods:{
            submit:function () {
                // this 就是Vue这个对象
                this.count ++
            },
            submit1(){
                this.count --
            }
        }
    })
</script>
</html>